<template>
    <div v-loading="loading" v-if="detailsInfo">
        <div class="vs-table-box orderStatus">
            <div class="left_order_status">
                订单状态： <span>{{ detailsInfo.status | productStatus }}</span>
            </div>
            <div class="right_money" v-if="detailsInfo.status == 1 || detailsInfo.status == 2">
                <el-button type="primary" @click="confirmReceipt()">确认入库</el-button>
            </div>
            <div class="right_money" v-if="detailsInfo.status == 3">
                <el-button type="primary" @click="dialogFormVisible1 = true">申请售后</el-button>
            </div>
            <div class="right_money" v-if="detailsInfo.status == 5">
                <el-button type="primary" @click="commit">确认收货</el-button>
            </div>
            <div v-else-if="detailsInfo.status == 7 && detailsInfo.cancel" style="margin-left: 100px; color: #9d9d9d">
                <span>取消时间：{{ detailsInfo.cancel.create_time }}</span>
                <span style="margin-left: 50px">取消原因：{{ detailsInfo.cancel.content }}</span>
            </div>
        </div>
        <div class="vs-table-box" style="padding: 20px 100px">
            <el-descriptions border title="售后信息" style="margin-top: 20px" v-if="detailsInfo.status == 5 && detailsInfo.afterSale">
                <el-descriptions-item label="要求返回门店日期">{{ detailsInfo.afterSale.date }}</el-descriptions-item>
                <el-descriptions-item label="物流公司">{{ detailsInfo.afterSale.logistics_company }}</el-descriptions-item>
                <el-descriptions-item label="物流单号">{{ detailsInfo.afterSale.logistics_number }}</el-descriptions-item>
                <el-descriptions-item label="售后类型">{{ detailsInfo.afterSale.type | typeFilter }}</el-descriptions-item>
                <el-descriptions-item label="申请售后时间">{{ detailsInfo.afterSale.create_time.slice(0, 16) }}</el-descriptions-item>
                <el-descriptions-item label="具体描述" :span="2">{{ detailsInfo.afterSale.describe }}</el-descriptions-item>
                <el-descriptions-item label="上传图片" :span="3">
                    <el-image style="width: 100px; height: 100px; margin-right: 10px" v-for="(item, index) in detailsInfo.afterSale.picture.split(',')" :key="index" :src="item" :preview-src-list="detailsInfo.afterSale.picture.split(',')"> </el-image>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions border title="物流信息" style="margin-top: 20px" v-if="detailsInfo.status == 5 && detailsInfo.afterSale">
                <el-descriptions-item label="快递公司">{{ detailsInfo.afterSale.logistics_company || '暂无物流信息' }}</el-descriptions-item>
                <el-descriptions-item label="快递单号">{{ detailsInfo.afterSale.logistics_number || '暂无物流信息' }} </el-descriptions-item>
                <el-descriptions-item label="发货时间">{{ detailsInfo.afterSale.create_time || '暂无物流信息' }}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions border title="要货单信息" style="margin-top: 20px">
                <el-descriptions-item label="要货单号">{{ detailsInfo.number }}</el-descriptions-item>
                <el-descriptions-item label="要货门店">{{ detailsInfo.store.title }}</el-descriptions-item>
                <el-descriptions-item label="商品类型">
                    {{ detailsInfo.two_type == 1 ? '定制毛坯' : '定制成品' }}
                </el-descriptions-item>
                <el-descriptions-item label="申请时间">{{ detailsInfo.create_time }}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions border title="顾客信息" style="margin-top: 20px" v-if="detailsInfo.user">
                <el-descriptions-item label="姓名">{{ detailsInfo.user.realname }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ detailsInfo.user.gender == 1 ? '男' : detailsInfo.user.gender == 2 ? '女' : '-' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ detailsInfo.user.phone }}</el-descriptions-item>
                <el-descriptions-item label="会员卡号">{{ detailsInfo.user.vip_no }}</el-descriptions-item>
                <el-descriptions-item label="头围">{{ detailsInfo.head }}</el-descriptions-item>
                <el-descriptions-item label="前后">{{ detailsInfo.up_down }}</el-descriptions-item>
                <el-descriptions-item label="左右">
                    <div style="display: flex; justify-content: space-between; align-items: center">
                        <div>{{ detailsInfo.about }}</div>
                        <div class="right_money">
                            <el-button v-if="detailsInfo.status == 3" @click="dialogFormVisible = true">修改会员信息</el-button>
                            <el-button v-if="detailsInfo.status <= 3" @click="voidOrder">订单作废</el-button>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>

            <el-descriptions border title="修改后顾客信息" style="margin-top: 20px" v-if="detailsInfo.user_old && detailsInfo.is_stock == 1">
                <el-descriptions-item label="姓名">{{ detailsInfo.user_old.realname }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ detailsInfo.user_old.gender == 1 ? '男' : '女' }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ detailsInfo.user_old.phone }}</el-descriptions-item>
                <el-descriptions-item label="会员卡号">{{ detailsInfo.user_old.vip_no }}</el-descriptions-item>
                <el-descriptions-item label="头围">{{ detailsInfo.head }}</el-descriptions-item>
                <el-descriptions-item label="前后">{{ detailsInfo.up_down }}</el-descriptions-item>
                <el-descriptions-item label="左右">{{ detailsInfo.about }}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions title="产品信息" border style="margin-top: 20px">
                <el-descriptions-item label="最晚到店时间">{{ detailsInfo.special.date }}</el-descriptions-item>
                <el-descriptions-item label="加急">{{ detailsInfo.special.urgent }}天</el-descriptions-item>
                <el-descriptions-item label="要货金额">
                    <span v-if="utils.getIsShopowner()">{{ detailsInfo.special.price }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="商品系列">{{ detailsInfo.special.series_name }}</el-descriptions-item>
                <el-descriptions-item label="毛坯种类">{{ detailsInfo.special.blank_type_name }}</el-descriptions-item>
                <el-descriptions-item label="递针类型">{{ detailsInfo.special.needle_type_name }}</el-descriptions-item>
                <el-descriptions-item label="尺寸">{{ detailsInfo.special.size_name }}</el-descriptions-item>
                <el-descriptions-item label="长度">{{ detailsInfo.special.length_name }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ detailsInfo.special.sex_name }}</el-descriptions-item>
                <el-descriptions-item label="颜色">{{ detailsInfo.special.colour_name }}</el-descriptions-item>
                <!-- <el-descriptions-item label="款号">{{detailsInfo.special.style_name}}</el-descriptions-item > -->
                <el-descriptions-item label="发型" v-if="detailsInfo.two_type != 1">{{ detailsInfo.special.hairstyle_name }}</el-descriptions-item>
                <el-descriptions-item label="PU边类型">{{ detailsInfo.special.pu_type | pu_typeFilter }}</el-descriptions-item>
                <el-descriptions-item label="PU边类型" v-if="detailsInfo.special.pu_type == 4">{{ detailsInfo.special.pu_type_content }}</el-descriptions-item>
                <el-descriptions-item label="PU边厚薄度">{{ detailsInfo.special.pu_thickness == 1 ? '薄PU' : 'NPU' }}</el-descriptions-item>
                <el-descriptions-item label="发质">{{ ['吃酸发', '印度发', '蛋白丝'][detailsInfo.special.hair_quality - 1] }}</el-descriptions-item>
                <el-descriptions-item label="前额娃娃发">{{ ['不加', '加', '加F网（肉色）', '加F网（黑色）'][detailsInfo.special.forehead - 1] }}</el-descriptions-item>
                <el-descriptions-item label="曲度">{{ detailsInfo.special.curvature }}</el-descriptions-item>
                <el-descriptions-item label="前额流向">{{ detailsInfo.special.flow_to == 1 ? '背头' : '刘海' }}</el-descriptions-item>
                <el-descriptions-item label="发量" :span="detailsInfo.special.pu_type == 4 ? 2 : 3">{{ detailsInfo.special.hair_volume }}%</el-descriptions-item>
                <el-descriptions-item label="图片示例" :span="3">
                    <el-image style="width: 100px; height: 100px; margin-right: 10px" v-for="(item, index) in srcList" :key="index" :src="item" :preview-src-list="srcList"> </el-image>
                </el-descriptions-item>
                <el-descriptions-item label="备注/特殊要求（打膜的大概尺寸请注明）">{{ detailsInfo.special.remarks }}</el-descriptions-item>
            </el-descriptions>

            <el-descriptions v-if="detailsInfo.orders && detailsInfo.orders.goods" title="消费信息" border style="margin-top: 20px"></el-descriptions>
            <el-table v-if="detailsInfo.orders && detailsInfo.orders.goods" :data="detailsInfo.orders.goods" border style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="70"> </el-table-column>
                <el-table-column label="名称" align="center" min-width="110" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{ scope.row.project_name || utils.productNameFiltering(scope.row) }}
                    </template>
                </el-table-column>
                <el-table-column label="商品类型" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.project_id">服务项目</span>
                        <span v-else>{{ scope.row.status | goodsType }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="price" label="单价" align="center"> </el-table-column> -->
                <el-table-column prop="number" label="数量" align="center"> </el-table-column>
                <!-- <el-table-column prop="discount_rate" label="折扣率" align="center"> </el-table-column> -->
                <!-- <el-table-column prop="discount_amount" label="折扣价" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.discount_amount }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column prop="discount_amount" label="折后价" align="center">
                    <template slot-scope="scope">
                        {{ (scope.row.price - scope.row.discount_amount).toFixed(2) }}
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="售后服务" v-if="form.user" align="center" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.return_status == 2" style="color: #02a7f0">已退款</div>
                        <div v-else style="color: #02a7f0; cursor: pointer" @click="tk(scope.row)">
                            {{ scope.row.return_status == 0 ? '退款' : '部分退款' }}
                        </div>
                    </template>
                </el-table-column> -->
            </el-table>

            <div class="vs-bottom-btns">
                <el-button @click="utils.backPage()">返回</el-button>
            </div>
        </div>

        <el-dialog title="修改会员信息" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="form" ref="form" :rules="rules" label-position="right" label-width="120px">
                <div style="width: 350px; margin: 20px 0">
                    <el-input placeholder="请输入姓名、手机号或会员卡号" style="margin-left: 50px" v-model.trim="keys">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        <div slot="append" @click="getUserSearch" class="search-right">
                            <i v-show="isBtn2" class="el-icon-loading"></i>
                            查找会员
                        </div>
                    </el-input>
                </div>
                <el-form-item label="姓名" prop="name">
                    <el-input style="width: 200px" clearable v-model="form.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                    <el-select style="width: 200px" clearable v-model="form.gender" disabled placeholder="请选择活动区域">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input style="width: 200px" clearable v-model="form.phone" disabled></el-input>
                </el-form-item>
                <el-form-item label="会员号" prop="vip_no">
                    <el-input style="width: 200px" clearable v-model="form.vip_no" disabled></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="setVipInfo">确 定</el-button>
            </div>
        </el-dialog>

        <vs-after-sales v-model="dialogFormVisible1" :id="id" @success="getProduction()"></vs-after-sales>
        <vs-select-user v-model="dialogVisible3" @affirm="affirmUser" :data="vipUserList"></vs-select-user>
    </div>
</template>

<script>
    import VsSelectUser from '@/components/VsSelectUser.vue';
    import VsUploading from '@/components/VsUploading.vue';
    import VsAfterSales from '@/components/VsAfterSales.vue';
    export default {
        components: { VsUploading, VsSelectUser, VsAfterSales },
        data() {
            return {
                id: '',
                vipUserList: [],
                dialogVisible3: false,
                isBtn2: false,
                keys: '',
                dialogFormVisible: false,
                dialogFormVisible1: false,
                detailsInfo: '', //获取详情
                srcList: [],
                loading: false,
                form: {},
                rules: {
                    name: { required: true, message: '请输入姓名', trigger: 'blur' },
                    gender: { required: true, message: '请选择性别', trigger: 'change' },
                    phone: { required: true, message: '请输入手机号', trigger: 'blur' },
                    vip_no: { required: true, message: '请输入vip号码', trigger: 'blur' },
                },
            };
        },
        filters: {
            productStatus(val) {
                let arr = ['已下单', '待入库', '部分入库', '已入库', '', '售后中', '取消审核', '已取消', '已作废', '已完成'];
                return arr[val];
            },
            pu_typeFilter(val) {
                let arr = ['不加', '前额+PU', '四周+PU', '其他'];
                return arr[val - 1];
            },
            typeFilter(val) {
                let arr = ['退货', '换货', '维修'];
                return arr[val - 1];
            },
            goodsType(val) {
                let arr = ['', '毛坯', '成品', '积分商品', '洗护商品', '其他'];
                return arr[val];
            },
        },
        created() {
            let { id } = this.$route.query;
            if (id) {
                this.id = id;
                this.getProduction();
            }
        },
        methods: {
            // 确认收货
            commit() {
                this.$confirm('是否确认收货?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(async () => {
                        let { code } = await this.$Http.specialAfterSaleConfirmReceipt({
                            take_ticket_id: this.$route.query.id,
                        });
                        if (code) {
                            this.$message.success('操作成功');
                            this.getProduction(this.$route.query.id);
                        }
                    })
                    .catch(() => {});
            },
            affirmUser(data) {
                this.form.user_id = data.id;
                this.form.vip_no = data.vip_no;
                this.form.phone = data.phone;
                (this.form.gender = data.gender + ''), (this.form.name = data.realname);
            },
            // 搜索
            async getUserSearch() {
                if (!this.keys || this.isBtn2) return;
                this.isBtn2 = true;
                let { code, data } = await this.$Http.getUserSearch({ keys: this.keys });
                this.isBtn2 = false;
                if (code && data) {
                    this.dialogVisible3 = true;
                    this.vipUserList = data;
                } else this.$message.warning('没有查询到相关的用户信息');
            },

            //   修改会员信息
            setVipInfo() {
                this.$refs['form'].validate(async (valid) => {
                    if (!valid) return;
                    let { code } = await this.$Http.specialUpdateUser(this.form);
                    if (code) {
                        this.dialogFormVisible = false;
                        this.$message.success('修改成功!');
                        let { id } = this.$route.query;
                        this.getProduction(id);
                    }
                });
            },
            //   作废
            voidOrder() {
                this.$msgbox({
                    title: '提示',
                    message: '您确定要确认作废?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '确认中...';
                            let { id } = this.$route.query;
                            let { code, data } = await this.$Http.specialVoid({
                                after_sale_id: id,
                            });
                            if (code) {
                                this.$message.success('操作成功!');
                                this.getProduction(id);
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    },
                })
                    .then((action) => {})
                    .catch(() => {});
            },
            // 获取详情
            async getProduction() {
                let id = this.id;
                this.loading = true;
                let { code, data } = await this.$Http.specialLists({ id: id });
                this.loading = false;
                if (code) {
                    this.detailsInfo = data;
                    this.srcList = data.special.images ? data.special.images.split(',') : [];
                    this.form = {
                        user_id: data?.user.id,
                        after_sale_id: id,
                        vip_no: data?.user.vip_no,
                        phone: data?.user.phone,
                        gender: data?.user.gender + '',
                        name: data?.user.realname,
                    };
                }
            },
            subitm() {},
            // 确认入库
            confirmReceipt() {
                // 判读制作完成后才可以入库
                // && (detail.special_order_status == 7)
                this.$msgbox({
                    title: '提示',
                    message: '您确定要确认入库?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '确认中...';
                            let { id } = this.$route.query;
                            let { code, data } = await this.$Http.specialConfirmReceipt({
                                after_sale_id: id,
                            });
                            if (code) {
                                this.$message.success('操作成功!');
                                this.getProduction(id);
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    },
                })
                    .then((action) => {})
                    .catch(() => {});
            },
        },
    };
</script>

<style lang="scss" scoped>
    ::v-deep {
        .el-input-group__append {
            cursor: pointer;
        }
    }
    table {
        width: auto;
        flex: 1;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: fixed;
        margin-left: 20px;
        td {
            border: 1px solid #ebeef5;
            text-align: center;
            color: #333333;
            padding: 0 5px;
            font-size: 14px;
        }
    }
    .add {
        ::v-deep {
            .el-form-item__content {
                display: flex;
                align-items: center;
            }
        }
    }
    .orderStatus {
        padding: 40px 40px;
        display: flex;
        align-items: center;

        .left_order_status {
            display: flex;
            align-items: center;

            > span {
                margin-left: 30px;
                font-size: 22px;
                color: red;
            }
        }

        .right_money {
            margin-left: auto;
            display: flex;
            align-items: center;

            > div {
                display: flex;
            }

            > div:first-child {
                margin-right: 40px;
                color: red;
            }
        }
    }

    .tip {
        margin-top: 20px;
        font-size: 14px;
        color: rgba($color: #000000, $alpha: 0.4);
        line-height: 20px;
    }
</style>
